<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="/media/css/style.css" rel="stylesheet" type="text/css">
    <link href="/media/css/fileuploader.css" rel="stylesheet" type="text/css">
    <link href="/media/css/jquery.ui.all.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/media/js/jquery-1.4.2.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.core.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.accordion.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.button.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.autocomplete.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.position.js"></script>
    <script type="text/javascript" src="/media/js/jquery.ui.tabs.js"></script>
    <script src="/media/js/fileuploader.js" type="text/javascript"></script>
    <script src="/media/js/jquery-string.1.0.js" type="text/javascript"></script>
    <script src="/media/js/core.js" type="text/javascript"></script>
    <script type="text/javascript">
        var current_path = '{{request.path}}';
        function createUploader(){            
            var uploader = new qq.FileUploader({
                element: document.getElementById('file-uploader'),
                action: '{{ request.path }}',
		onComplete: init
            });           
        }
        
        // in your app create uploader as soon as the DOM is ready
        // don't wait for the window to load  
        window.onload = createUploader;

	function loadList(path){
	    $('#fileList-container').load(path + '?action=lsdir', initFileListDisplay);
	}
	
	function initFileListDisplay() {
	    $("#fileList").accordion({
		collapsible: true,
		active: false,
		autoHeight: false,
		event: 'expand'
	    });
	    $(".button").button();
	    $(".buttonset").buttonset();
	    var availablePrincipal = ["/users/jianghailong", "/users/jianghailong", "/users/zengxinyan", "/groups/neteaes", "/groups/admin"];
	    $(".principalList").autocomplete({
		source: availablePrincipal
	    });
	    $(".tabs").tabs()
	}

	function init() {
	    loadList('{{request.path}}');
	}

        $(document).ready(function() {
	    init();
	});
    </script>
  </head>
  <body>
    <div id="header">
      <div>
	Username:<input type="text" id="username" />
	Password:<input type="password" id="password" />
	<button class="button" value="Login" onclick="login($('#username').val(), $('#password').val())">Login</button>
      </div>
    </div>
    <div id="content">
      <div id="msg"><b>{{ msg }}</b></div>
      <div id="left">
	<div id="file-uploader">
	</div>
      </div>
      <div id="right">
	<div class="tabs">
	  <ul>
	    <li><a href="#fileList-container">FileList</a></li>
	    <li><a href="#groupList-container">GroupList</a></li>
	  </ul>
	  <div id="fileList-container">
	  </div>
	  <div id="groupList-container">
	  </div>
	</div>
      </div>
    </div>
  </body>
</html>
  
